<template>
	<view class="xubao-page">
		<!-- 任务清单 -->
		<view class="work-page" v-show="tabIndex == 0">

			<view class="date-screen-box">
				<view class="date-item" :class="{'active': dateTabIndex == 0}" @click.stop="workDateClick('today')">今日
				</view>
				<view class="date-item" :class="{'active': dateTabIndex == 1}" @click.stop="workDateClick('tomorrow')">
					明日</view>
				<view class="date-item" :class="{'active': dateTabIndex == 2}" @click.stop="workDateClick('week')">本周
				</view>
			</view>

			<view class="todo-work-box">
				<view class="top-text">
					<text>您有</text>
					<text class="todo-work-num" v-if="dateTabIndex == 0">{{todayUnCompleted}}</text>
					<text class="todo-work-num" v-else-if="dateTabIndex == 1">{{tomorrowUnCompleted}}</text>
					<text class="todo-work-num" v-else-if="dateTabIndex == 2">{{weekUnCompleted}}</text>
					<text>个待办任务</text>
				</view>
				<view class="btm-text" v-if="dateTabIndex == 0">已处理{{todayCompleted}}个任务</view>
				<view class="btm-text" v-else-if="dateTabIndex == 1">已处理{{tomorrowCompleted}}个任务</view>
				<view class="btm-text" v-else-if="dateTabIndex == 2">已处理{{weekCompleted}}个任务</view>
				<view class="work-gress">
					<progress v-if="dateTabIndex == 0" :percent="todayPercent" stroke-width="8" duration="20"
						border-radius="40" backgroundColor="#005297" activeColor="#ffffff" :active="true" />
					<progress v-else-if="dateTabIndex == 1" :percent="tomorrowPercent" stroke-width="8" duration="20"
						border-radius="40" backgroundColor="#005297" activeColor="#ffffff" :active="true" />
					<progress v-else-if="dateTabIndex == 2" :percent="weekPercent" stroke-width="8" duration="20"
						border-radius="40" backgroundColor="#005297" activeColor="#ffffff" :active="true" />
				</view>
			</view>

			<view class="work-state-tab">
				<!-- 今日任务 -->
				<van-tabs v-show="dateTabIndex == 0" animated line-width="0" type="line" color="#008aff"
					title-active-color="#008aff">
					<van-tab :title="todayXubaoTitle.toBeCompleted">
						<view class="work-list" v-if="todayXubaoWorkList.toBeCompleted.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'tobeCompleted')"
								v-for="(item, index) in todayXubaoWorkList.toBeCompleted" :key="index">
								<view class="work-item-icon">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
					<van-tab :title="todayXubaoTitle.continue">
						<view class="work-list" v-if="todayXubaoWorkList.continue.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'continue')"
								v-for="(item, index) in todayXubaoWorkList.continue" :key="index">
								<view class="work-item-icon continue">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
					<van-tab :title="todayXubaoTitle.finished">
						<view class="work-list" v-if="todayXubaoWorkList.finished.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'finished')"
								v-for="(item, index) in todayXubaoWorkList.finished" :key="index">
								<view class="work-item-icon completed">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
					<van-tab :title="todayXubaoTitle.abandon">
						<view class="work-list" v-if="todayXubaoWorkList.abandon.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'abandon')"
								v-for="(item, index) in todayXubaoWorkList.abandon" :key="index">
								<view class="work-item-icon stop">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
				</van-tabs>

				<!-- 明日任务 -->
				<van-tabs v-show="dateTabIndex == 1" animated line-width="0" type="line" color="#008aff"
					title-active-color="#008aff">
					<van-tab :title="nextDayXubaoTitle.toBeCompleted">
						<view class="work-list" v-if="nextDayXubaoWorkList.toBeCompleted.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'tobeCompleted')"
								v-for="(item, index) in nextDayXubaoWorkList.toBeCompleted" :key="index">
								<view class="work-item-icon">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
					<van-tab :title="nextDayXubaoTitle.continue">
						<view class="work-list" v-if="nextDayXubaoWorkList.continue.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'continue')"
								v-for="(item, index) in nextDayXubaoWorkList.continue" :key="index">
								<view class="work-item-icon continue">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
					<van-tab :title="nextDayXubaoTitle.finished">
						<view class="work-list" v-if="nextDayXubaoWorkList.finished.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'finished')"
								v-for="(item, index) in nextDayXubaoWorkList.finished" :key="index">
								<view class="work-item-icon completed">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
					<van-tab :title="nextDayXubaoTitle.abandon">
						<view class="work-list" v-if="nextDayXubaoWorkList.abandon.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'abandon')"
								v-for="(item, index) in nextDayXubaoWorkList.abandon" :key="index">
								<view class="work-item-icon stop">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
				</van-tabs>


				<!-- 本周任务 -->
				<van-tabs v-show="dateTabIndex == 2" animated line-width="0" type="line" color="#008aff"
					title-active-color="#008aff">
					<van-tab :title="weekDayXubaoTitle.toBeCompleted">
						<view class="work-list" v-if="weekDayXubaoWorkList.toBeCompleted.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'tobeCompleted')"
								v-for="(item, index) in weekDayXubaoWorkList.toBeCompleted" :key="index">
								<view class="work-item-icon">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
					<van-tab :title="weekDayXubaoTitle.continue">
						<view class="work-list" v-if="weekDayXubaoWorkList.continue.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'continue')"
								v-for="(item, index) in weekDayXubaoWorkList.continue" :key="index">
								<view class="work-item-icon continue">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
					<van-tab :title="weekDayXubaoTitle.finished">
						<view class="work-list" v-if="weekDayXubaoWorkList.finished.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'finished')"
								v-for="(item, index) in weekDayXubaoWorkList.finished" :key="index">
								<view class="work-item-icon completed">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
					<van-tab :title="weekDayXubaoTitle.abandon">
						<view class="work-list" v-if="weekDayXubaoWorkList.abandon.length > 0">
							<view class="work-item" @click="handleGoWorkDetail(item, 'abandon')"
								v-for="(item, index) in weekDayXubaoWorkList.abandon" :key="index">
								<view class="work-item-icon stop">
									<van-icon class="icon" name="todo-list" />
								</view>
								<view class="work-item-cus-info">
									<view class="cus-name">{{item.name}} - {{item.lsn}}</view>
									<view class="cus-work-type">{{item.subject}}</view>
								</view>
							</view>
						</view>

						<view class="no-work-list" v-else>
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="no-data-text">暂无维系任务</text>
						</view>
					</van-tab>
				</van-tabs>
			</view>
		</view>

		<!-- 预约清单 -->
		<view class="appointment-page" v-show="tabIndex == 1">
			<view class="date-range">
				<uni-datetime-picker v-model="appointmentRange" type="daterange" :clear-icon="false" :border="false"
					@change="appointmentRangeClick" />
			</view>
			<view class="appointment-title">已预约列表 ({{appointmentList.length}})</view>

			<view class="appointment-list" v-if="appointmentList.length > 0">
				<view class="appointment-item" v-for="(item, index) in appointmentList" :key="index">
					<van-icon class="appointment-icon" name="manager" />
					<view class="appointment-content-right">
						<view class="appointment-content-header">
							<text class="appointment-user-info">{{item.lsn}}</text>
							<text class="appointment-date">{{item.appointmentTime}}</text>
						</view>
						<view class="appointment-content-bottom">维系人：{{item.personLiable}}</view>
					</view>
				</view>
			</view>

			<view class="no-appointment-list" v-else>
				<image src="../../static/no-data.png" class="no-data-icon" mode="widthFix"></image>
				<text class="no-data-text">无已预约数据</text>
			</view>
		</view>

		<!-- KPI报表 -->
		<view class="kpi-page" v-show="tabIndex == 2">
			<view class="date-range">
				<view class="date-range-mask" @click.stop="handleOpenDatePicker"></view>
				<uni-datetime-picker v-model="range" ref="uniDateTimePicker" type="daterange" :clear-icon="false"
					:border="false" @change="dateChange" @maskClick="maskClick" />
			</view>
			<view v-show="isChartShow">
				<!-- KPI筛选模块 -->
				<!-- <view class="screen-kpi-section">
					<view class="record-kpi-type" @click.stop="handleToggleProject">
						<text class="record-kpi-type-text">{{currentProjectName}}</text>
						<van-icon class="arrow-icon" name="arrow-down" />
					</view>

					<view class="record-kpi-type member" @click.stop="handleToggleMember">
						<text class="record-kpi-type-text">{{currentMemberName}}</text>
						<van-icon class="arrow-icon" name="arrow-down" />
					</view>
				</view> -->

				<!-- KPI显示模块 -->
				<!-- <view class="kpi-chart-box" :style="{'height': safeKPIheight + 'px'}"> -->
				<view class="record-kpi-finish-total">
					<view class="header-circle">
						<view class="finish-circle-chart-title">完成率</view>
						<view class="finish-circle-chart">
							<qiun-data-charts type="gauge" :opts="opts" :canvas2d="true"
								canvasId="ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345671" :chartData="chartData" />
						</view>
					</view>
					<view class="bottom-total-statics">
						<view class="statics-item">
							<view class="statics-value-text text1">{{staticsData.total}}</view>
							<view class="statics-value-title">维系总数</view>
						</view>
						<view class="statics-item">
							<view class="statics-value-text text2">{{staticsData.finish}}</view>
							<view class="statics-value-title">已完成</view>
						</view>
						<view class="statics-item">
							<view class="statics-value-text text3">{{staticsData.unfinished}}</view>
							<view class="statics-value-title">未完成</view>
						</view>
						<view class="statics-item">
							<view class="statics-value-text text4">{{staticsData.continue}}</view>
							<view class="statics-value-title">继续</view>
						</view>
						<view class="statics-item">
							<view class="statics-value-text text5">{{staticsData.giveUp}}</view>
							<view class="statics-value-title">放弃</view>
						</view>
					</view>
				</view>

				<view class="record-kpi-item">
					<view class="record-kpi-item-title">节点分布统计</view>
					<view class="record-kpi-item-chart" :style="{'height': projectKPIheight + 'px'}"
						v-if="isProjectKPIshow">
						<qiun-data-charts type="bar" :opts="projectDistriOpts" :canvas2d="true"
							canvasId="ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345672"
							:chartData="projectDistriChartData" @tap="handleProjectTap($event)" />
					</view>

					<view class="record-kpi-item-chart item-chart-top" v-else>
						<view class="record-kpi-item-chart-tips">
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="tips-text">暂无数据</text>
						</view>
					</view>
				</view>

				<view class="record-kpi-item">
					<view class="record-kpi-item-title">成员结果分布统计</view>
					<view class="record-kpi-item-chart" :style="{'height': memberKPIheight + 'px'}"
						v-if="isMemberKPIshow">
						<qiun-data-charts type="bar" :canvas2d="true"
							canvasId="ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345673" :opts="memberOpts"
							:ontouch="true" :chartData="memberChartData" />
					</view>

					<view class="record-kpi-item-chart item-chart-top" v-else>
						<view class="record-kpi-item-chart-tips">
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="tips-text">暂无数据</text>
						</view>
					</view>
				</view>

				<view class="record-kpi-item">
					<view class="record-kpi-item-title">预约结果统计</view>
					<view class="record-kpi-item-chart" :style="{'height': appointmentKPIheight + 'px'}"
						v-if="isAppointmentKPIshow">
						<qiun-data-charts type="bar" :canvas2d="true"
							canvasId="ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345676" :opts="appointmentOpts"
							:ontouch="true" :chartData="appointmentChartData" />
					</view>

					<view class="record-kpi-item-chart item-chart-top" v-else>
						<view class="record-kpi-item-chart-tips">
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="tips-text">暂无数据</text>
						</view>
					</view>
				</view>

				<view class="record-kpi-item">
					<view class="record-kpi-item-title">战败分布统计</view>
					<view class="record-kpi-item-chart" :style="{'height': failKPIheight + 'px'}" v-if="isFailKPIshow">
						<qiun-data-charts type="bar" :canvas2d="true"
							canvasId="ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345674" :opts="failOpts" :ontouch="true"
							:chartData="failChartData" />
					</view>

					<view class="record-kpi-item-chart item-chart-top" v-else>
						<view class="record-kpi-item-chart-tips">
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="tips-text">暂无数据</text>
						</view>
					</view>
				</view>

				<view class="record-kpi-item">
					<view class="record-kpi-item-title date-item-title">
						<view>日期分布统计</view>
						<view class="year">{{currentYear}}年</view>
					</view>
					<view class="record-kpi-item-chart date-item-chart" v-if="isDateKPIshow">
						<qiun-data-charts type="area" :canvas2d="true"
							canvasId="ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345675" :opts="dateOpts" :ontouch="true"
							:chartData="dateChartData" />
					</view>
					<view class="record-kpi-item-chart item-chart-top" v-else>
						<view class="record-kpi-item-chart-tips">
							<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
							<text class="tips-text">暂无数据</text>
						</view>
					</view>
				</view>
				<!-- </view> -->



				<view class="height"></view>
			</view>
		</view>

		<!-- 数据处理 -->
		<view class="data-page" v-show="tabIndex == 3">
			<view class="data-page-header">
				<image class="header-img" src="https://biapi.vaubang.cn/UploadFiles/Images/xubao-1.png"></image>
			</view>
			<view class="data-page-list">
				<uni-list>
					<uni-list-item :show-extra-icon="true" :extra-icon="{
						color: '#008aff',
						size: '20',
						type: 'upload'
					}" showArrow title="数据导入" clickable @click.stop="handleItemClick('import')" />
					<uni-list-item :show-extra-icon="true" :extra-icon="{
						color: '#A2C463',
						size: '20',
						type: 'download'
					}" showArrow title="数据导出" clickable @click.stop="handleItemClick('export')" />
					<uni-list-item :show-extra-icon="true" :extra-icon="{
						color: '#6AC5C6',
						size: '20',
						type: 'loop'
					}" showArrow title="数据清空" clickable @click.stop="handleDataClear" />
				</uni-list>

				<uni-list>
					<uni-list-item :show-extra-icon="true" :extra-icon="{
						color: '#F0B83C',
						size: '20',
						type: 'list'
					}" showArrow title="历史维系记录" clickable @click.stop="handleItemClick('record')" />
					<uni-list-item :show-extra-icon="true" :extra-icon="{
						color: '#008aff',
						size: '20',
						type: 'circle-filled'
					}" showArrow :title="currentProjectName + '维系节点'" clickable @click.stop="handleItemClick('node')" />
					<uni-list-item :show-extra-icon="true" :extra-icon="{
						color: '#A2C463',
						size: '20',
						type: 'staff'
					}" showArrow title="任务转移" clickable @click.stop="handleItemClick('transfer')" />
				</uni-list>
			</view>
		</view>

		<!-- 切换项目类别popup -->
		<van-popup :show="projectTypePopShow" position="bottom">
			<van-picker show-toolbar :columns="projectTypeList" @confirm="onProjectTypeConfirm"
				@cancel="onProjectTypeCancel" />
		</van-popup>

		<!-- 切换成员popup -->
		<van-popup :show="memberPopShow" position="bottom">
			<van-picker show-toolbar :columns="memberTypeList" @confirm="onMemberConfirm" @cancel="onMemberCancel" />
		</van-popup>

		<!-- 底部tabbar -->
		<view class="tabHeight" :style="{'height': tabH + 'px'}"></view>
		<xu-bao ref="tabbar" :tab-index="tabIndex" @handleTabToggle="handleTab"></xu-bao>


		<!-- 筛选popup -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="screen-content-box">
				<view class="screen-item">
					<view class="screen-item-name">维系类型</view>
					<view class="screen-type-content">
						<view class="screen-type-item" :class="{'active': screenData.wxType =='定保'}"
							@click="onScreenTypeSelect('dingbao')">定保</view>
						<view class="screen-type-item" :class="{'active': screenData.wxType =='续保'}"
							@click="onScreenTypeSelect('xubao')">续保</view>
					</view>
				</view>

				<view class="btn-list">
					<view class="done-btn" @click.stop="submitScreen">导出数据</view>
				</view>

				<view class="screen-height"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import xuBao from "@/packageA/components/xubao/xubao-footer.vue";
	import apiRqs from "@/api/api-request.js";
	import getDateTime from '@/common/getDateTime.js';
	import removeDuplication from '@/common/removeDuplication.js';
	export default {
		components: {
			xuBao,
		},
		data() {
			return {
				tabIndex: 0,
				dateTabIndex: 0,
				todayCollapseValue: ['0'],
				tomorrowCollapseValue: ['0'],
				weekCollapseValue: ['0'],
				todayOpen: true,
				tomorrowOpen: false,
				weekOpen: false,
				tabH: 0,
				shopId: "",
				projectList: [],
				projectTypeList: ['定保', '续保'],
				projectTypeIdList: [],
				projectTypePopShow: false,
				memberList: [],
				memberPopShow: false,
				memberTypeList: [],
				memberTypeIdList: [],
				roleList: [],
				roleTypeIdList: [],
				memberTypeValue: "",
				memberTypeIdValue: "",
				currentProjectName: "定保",
				currentProjectId: "",
				currentMemberName: "全部人员",
				currentMemberId: ["0"],
				range: [],
				chartData: {},
				projectDistriChartData: {},
				memberChartData: {},
				appointmentChartData: {},
				failChartData: {},
				dateChartData: {},
				isProjectKPIshow: true,
				isMemberKPIshow: true,
				isFailKPIshow: true,
				isDateKPIshow: true,
				isAppointmentKPIshow: true,
				opts: {
					color: ["#008aff", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "",
						fontSize: 24,
						color: "#008aff",
						offsetY: -6
					},
					subtitle: {
						name: "",
						fontSize: 15,
						color: "#FD6758",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: 0,
								splitNumber: 8,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 14
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					}
				},

				projectDistriOpts: {
					color: ["#F0B83C", "#008aff", "#A2C463", "#6AC5C6", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					legend: {},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						fontSize: 12,
						min: 0,
						axisLine: false,
						axisLineColor: "#EEEEEE",
						gridColor: "#EEEEEE",
						fontColor: "#FFFFFF",
					},
					yAxis: {
						type: 'categories',
						format: "tooltipLength",
					},
					extra: {
						bar: {
							type: "stack",
							width: 20,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							linearType: "opacity",
							activeBgOpacity: 0.08,
							seriesGap: 8,
							categoryGap: 2
						}
					}
				},
				memberOpts: {
					color: ["#F0B83C", "#008aff", "#A2C463", "#6AC5C6", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					legend: {},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						fontSize: 12,
						min: 0,
						axisLine: false,
						axisLineColor: "#EEEEEE",
						gridColor: "#EEEEEE",
						fontColor: "#FFFFFF",
					},
					yAxis: {
						type: 'categories',
						format: "tooltipLength",
					},
					extra: {
						bar: {
							type: "stack",
							width: 20,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							linearType: "opacity",
							activeBgOpacity: 0.08,
							seriesGap: 8,
							categoryGap: 2
						}
					}
				},

				appointmentOpts: {
					color: ["#F0B83C", "#008aff", "#A2C463", "#6AC5C6", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					legend: {},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						fontSize: 12,
						min: 0,
						axisLine: false,
						axisLineColor: "#EEEEEE",
						gridColor: "#EEEEEE",
						fontColor: "#FFFFFF",
					},
					yAxis: {
						type: 'categories',
						format: "tooltipLength",
					},
					extra: {
						bar: {
							type: "stack",
							width: 20,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							linearType: "opacity",
							activeBgOpacity: 0.08,
							seriesGap: 8,
							categoryGap: 2
						}
					}
				},

				failOpts: {
					color: ["#F0B83C", "#008aff", "#A2C463", "#6AC5C6", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					legend: {},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						fontSize: 12,
						min: 0,
						axisLine: false,
						axisLineColor: "#EEEEEE",
						gridColor: "#EEEEEE",
						fontColor: "#FFFFFF",
					},
					yAxis: {
						type: 'categories',
						format: "tooltipLength",
					},
					extra: {
						bar: {
							type: "stack",
							width: 20,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							linearType: "opacity",
							activeBgOpacity: 0.08,
							seriesGap: 8,
							categoryGap: 2
						}
					}
				},
				dateOpts: {
					color: ["#008aff", "#F0B83C", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					legend: {},
					xAxis: {
						disableGrid: true,
						fontSize: 10,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 2,
							gradient: true
						}
					}
				},
				rqsData: {
					"shopId": "",
					"dateRange": {
						"beginDate": "",
						"endDate": ""
					},
					"tempId": "0",
					"userId": [
						"0"
					]
				},
				staticsData: {},
				currentYear: "",
				projectKPIheight: 240,
				memberKPIheight: 240,
				appointmentKPIheight: 240,
				failKPIheight: 240,
				isChartShow: true,
				workListDate: {
					"beginDate": "",
					"endDate": ""
				},
				todayXubaoWorkList: {},
				todayXubaoTitle: {
					toBeCompleted: '待完成 (-)',
					continue: '继续 (-)',
					finished: '已完成 (-)',
					abandon: '终止 (-)'
				},
				nextDayXubaoWorkList: {},
				nextDayXubaoTitle: {
					toBeCompleted: '待完成 (-)',
					continue: '继续 (-)',
					finished: '已完成 (-)',
					abandon: '终止 (-)'
				},
				weekDayXubaoWorkList: {},
				weekDayXubaoTitle: {
					toBeCompleted: '待完成 (-)',
					continue: '继续 (-)',
					finished: '已完成 (-)',
					abandon: '终止 (-)'
				},
				screenData: {
					wxType: "定保",
					lsn: "",
					vin: ""
				},
				safeKPIheight: 0,
				appointmentRange: [],
				appointmentList: [],
				todayUnCompleted: '-',
				todayCompleted: '-',
				tomorrowUnCompleted: '-',
				tomorrowCompleted: '-',
				weekUnCompleted: '-',
				weekCompleted: '-',
				todayPercent: 0,
				tomorrowPercent: 0,
				weekPercent: 0,
			}
		},
		onReady() {

		},
		onShow() {
			const tokenInfo = uni.getStorageSync("tokenInfo");
			const wxType = uni.getStorageSync("wxType");
			var timeStr = getDateTime.dateTimeStr('y-m-d'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.range[0] = timeStr + " 00:00:00";
			this.range[1] = timeStr + " 00:00:00";
			this.appointmentRange[0] = timeStr + " 00:00:00";
			this.appointmentRange[1] = timeStr + " 00:00:00";
			this.rqsData.dateRange.beginDate = timeStr + " 00:00:00";
			this.rqsData.dateRange.endDate = timeStr + " 00:00:00";
			this.rqsData.shopId = tokenInfo.shopId;
			this.workListDate.beginDate = timeStr + " 00:00:00";
			this.workListDate.endDate = timeStr + " 00:00:00";
			this.shopId = tokenInfo.shopId;
			this.handleGetMemberList();
			if (wxType == 'xubao') {
				uni.setNavigationBarTitle({
					title: '续保维系'
				})
				this.currentProjectName = "续保";
				this.handleGetXbWorkList();

			} else if (wxType == 'dingbao') {
				uni.setNavigationBarTitle({
					title: '定保维系'
				})
				this.currentProjectName = "定保";
				this.handleGetDbWorkList();
			}
			const systemInfo = uni.getSystemInfoSync();
			console.log('systemInfo', systemInfo);
			const phoneH = systemInfo.windowHeight - systemInfo.safeAreaInsets.bottom - 150;
			this.safeKPIheight = phoneH;
		},
		onLoad() {
			const wxType = uni.getStorageSync("wxType");
			// getApp().showLoading();
			this.$nextTick(() => {
				let tabH = this.$refs.tabbar.safeArea.bottom + 48;
				this.tabH = tabH;
				if (wxType == 'xubao') {
					this.handleGetXbWorkList();
				} else if (wxType == 'dingbao') {
					this.handleGetDbWorkList();
				}
			})
		},
		methods: {
			// 今日、明日、本周tab切换
			workDateClick(type) {
				if (type == 'today') {
					this.dateTabIndex = 0;
				} else if (type == 'tomorrow') {
					this.dateTabIndex = 1;
				} else {
					this.dateTabIndex = 2;
				}
			},
			// 预约列表日期选择确认
			appointmentRangeClick(e) {
				this.appointmentRange[0] = e[0] + " 00:00:00";
				this.appointmentRange[1] = e[1] + " 00:00:00";
				console.log('预约列表日期选择:', e);
				this.handleGetAppointmentList();
			},
			handleTab(index) {
				const wxType = uni.getStorageSync("wxType");
				this.tabIndex = index;
				if (index == 0) {
					if (wxType == 'xubao') {
						this.handleGetXbWorkList();
					} else if (wxType == 'dingbao') {
						this.handleGetDbWorkList();
					}
				} else if (index == 1) {
					this.handleGetAppointmentList();
				} else if (index == 2) {
					this.handleProjectStatics();
					this.getProjectDistriData();
					this.getMemberData();
					this.getAppointmentData();
					this.getFailData();
					this.getDateData();
				}
			},
			handleGoWorkDetail(item, type) {
				uni.setStorageSync("xubaoItem", item);
				uni.navigateTo({
					url: "/packageD/xubao/xubao-detail?type=" + type
				})
			},
			// 获取续保任务清单 - 当日、明天、本周
			handleGetXbWorkList() {
				let toDay = getDateTime.getDay(0) + " 00:00:00"; // 今日
				let nextDay = getDateTime.getDay(1) + " 00:00:00"; // 明天
				let weekDay = getDateTime.getDay(7) + " 00:00:00"; // 本周
				// 今日任务清单
				let p1 = new Promise((resolve) => {
					this.todayOpen = false;
					let workListDate = {
						"beginDate": toDay,
						"endDate": toDay
					};
					apiRqs._getXBworkList(workListDate).then((res) => {
						console.log('续保今日任务清单', res);
						if (res.code == 200) {
							let newData = JSON.parse(JSON.stringify(res.data));
							if (newData.abandon == null || newData.abandon == "") {
								newData.abandon = [];
							}
							if (newData.continue == null || newData.continue == "") {
								newData.continue = [];
							}
							if (newData.finished == null || newData.finished == "") {
								newData.finished = [];
							}
							if (newData.toBeCompleted == null || newData.toBeCompleted == "") {
								newData.toBeCompleted = [];
							}
							this.todayXubaoTitle.toBeCompleted = `待完成 (${newData.toBeCompleted.length})`;
							this.todayXubaoTitle.continue = `继续 (${newData.continue.length})`;
							this.todayXubaoTitle.finished = `已完成 (${newData.finished.length})`;
							this.todayXubaoTitle.abandon = `终止 (${newData.abandon.length})`;
							this.todayUnCompleted = newData.toBeCompleted.length;
							this.todayCompleted = newData.continue.length + newData.finished.length +
								newData.abandon.length;
							const total = newData.continue.length + newData.finished.length +
								newData.abandon.length + newData.toBeCompleted.length;
							this.todayPercent = ((newData.continue.length + newData.finished.length +
								newData.abandon.length) / total * 100).toFixed(
								0);
							console.log('今日续保完成率', this.todayPercent);
							if (newData.toBeCompleted.length == 0) {
								this.todayOpen = false;
							} else {
								this.todayOpen = true;
							}
							this.todayXubaoWorkList = newData;
							resolve();
						}
					})
				})

				let p2 = new Promise((resolve) => {
					this.tomorrowOpen = false;
					let workListDate = {
						"beginDate": nextDay,
						"endDate": nextDay
					};
					apiRqs._getXBworkList(workListDate).then((res) => {
						console.log('续保明日任务清单', res);
						if (res.code == 200) {
							let newData = JSON.parse(JSON.stringify(res.data));
							if (newData.abandon == null || newData.abandon == "") {
								newData.abandon = [];
							}
							if (newData.continue == null || newData.continue == "") {
								newData.continue = [];
							}
							if (newData.finished == null || newData.finished == "") {
								newData.finished = [];
							}
							if (newData.toBeCompleted == null || newData.toBeCompleted == "") {
								newData.toBeCompleted = [];
							}
							this.nextDayXubaoTitle.toBeCompleted = `待完成 (${newData.toBeCompleted.length})`;
							this.nextDayXubaoTitle.continue = `继续 (${newData.continue.length})`;
							this.nextDayXubaoTitle.finished = `已完成 (${newData.finished.length})`;
							this.nextDayXubaoTitle.abandon = `终止 (${newData.abandon.length})`;
							this.tomorrowUnCompleted = newData.toBeCompleted.length;
							this.tomorrowCompleted = newData.continue.length + newData.finished.length +
								newData.abandon.length;
							const total = newData.continue.length + newData.finished.length +
								newData.abandon.length + newData.toBeCompleted.length;
							this.tomorrowPercent = ((newData.continue.length + newData.finished.length +
								newData.abandon.length) / total * 100).toFixed(
								0);
							console.log('明日续保完成率', this.tomorrowPercent);
							if (newData.toBeCompleted.length == 0) {
								this.tomorrowOpen = false;
							} else {
								this.tomorrowOpen = true;
							}
							this.nextDayXubaoWorkList = newData;
							resolve();
						}
					})
				})

				let p3 = new Promise((resolve) => {
					this.weekOpen = false;
					let workListDate = {
						"beginDate": weekDay,
						"endDate": weekDay
					};
					apiRqs._getXBworkList(workListDate).then((res) => {
						console.log('续保本周任务清单', res);
						if (res.code == 200) {
							let newData = JSON.parse(JSON.stringify(res.data));
							if (newData.abandon == null || newData.abandon == "") {
								newData.abandon = [];
							}
							if (newData.continue == null || newData.continue == "") {
								newData.continue = [];
							}
							if (newData.finished == null || newData.finished == "") {
								newData.finished = [];
							}
							if (newData.toBeCompleted == null || newData.toBeCompleted == "") {
								newData.toBeCompleted = [];
							}
							this.weekDayXubaoTitle.toBeCompleted = `待完成 (${newData.toBeCompleted.length})`;
							this.weekDayXubaoTitle.continue = `继续 (${newData.continue.length})`;
							this.weekDayXubaoTitle.finished = `已完成 (${newData.finished.length})`;
							this.weekDayXubaoTitle.abandon = `终止 (${newData.abandon.length})`;
							this.weekUnCompleted = newData.toBeCompleted.length;
							this.weekCompleted = newData.continue.length + newData.finished.length +
								newData.abandon.length;
							const total = newData.continue.length + newData.finished.length +
								newData.abandon.length + newData.toBeCompleted.length;
							this.weekPercent = ((newData.continue.length + newData.finished.length +
								newData.abandon.length) / total * 100).toFixed(
								0);
							console.log('本周续保完成率', this.weekPercent);
							if (newData.toBeCompleted.length == 0) {
								this.weekOpen = false;
							} else {
								this.weekOpen = true;
							}
							this.weekDayXubaoWorkList = newData;
							resolve();
						}
					})
				})

				p1.then(() => {
					p2.then(() => {
						p3.then(() => {
							uni.hideLoading();
							console.log('执行完毕');
						})
					})
				})

			},

			// 获取定保任务清单 - 当日、明天、本周
			handleGetDbWorkList() {
				let toDay = getDateTime.getDay(0) + " 00:00:00"; // 今日
				let nextDay = getDateTime.getDay(1) + " 00:00:00"; // 明天
				let weekDay = getDateTime.getDay(7) + " 00:00:00"; // 本周
				// 今日任务清单
				let p1 = new Promise((resolve) => {
					this.todayOpen = false;
					let workListDate = {
						"beginDate": toDay,
						"endDate": toDay
					};
					apiRqs._getDBworkList(workListDate).then((res) => {
						console.log('定保今日任务清单', res);
						if (res.code == 200) {
							let newData = JSON.parse(JSON.stringify(res.data));
							if (newData.abandon == null || newData.abandon == "") {
								newData.abandon = [];
							}
							if (newData.continue == null || newData.continue == "") {
								newData.continue = [];
							}
							if (newData.finished == null || newData.finished == "") {
								newData.finished = [];
							}
							if (newData.toBeCompleted == null || newData.toBeCompleted == "") {
								newData.toBeCompleted = [];
							}
							this.todayXubaoTitle.toBeCompleted = `待完成 (${newData.toBeCompleted.length})`;
							this.todayXubaoTitle.continue = `继续 (${newData.continue.length})`;
							this.todayXubaoTitle.finished = `已完成 (${newData.finished.length})`;
							this.todayXubaoTitle.abandon = `终止 (${newData.abandon.length})`;
							this.todayUnCompleted = newData.toBeCompleted.length;
							this.todayCompleted = newData.continue.length + newData.finished.length +
								newData.abandon.length;
							const total = newData.continue.length + newData.finished.length +
								newData.abandon.length + newData.toBeCompleted.length;
							this.todayPercent = ((newData.continue.length + newData.finished.length +
								newData.abandon.length) / total * 100).toFixed(
								0);
							console.log('今日定保完成率', this.todayPercent);
							if (newData.toBeCompleted.length == 0) {
								this.todayOpen = false;
							} else {
								this.todayOpen = true;
							}
							this.todayXubaoWorkList = newData;
							resolve();
						}
					})
				})

				let p2 = new Promise((resolve) => {
					this.tomorrowOpen = false;
					let workListDate = {
						"beginDate": nextDay,
						"endDate": nextDay
					};
					apiRqs._getDBworkList(workListDate).then((res) => {
						console.log('定保明日任务清单', res);
						if (res.code == 200) {
							let newData = JSON.parse(JSON.stringify(res.data));
							if (newData.abandon == null || newData.abandon == "") {
								newData.abandon = [];
							}
							if (newData.continue == null || newData.continue == "") {
								newData.continue = [];
							}
							if (newData.finished == null || newData.finished == "") {
								newData.finished = [];
							}
							if (newData.toBeCompleted == null || newData.toBeCompleted == "") {
								newData.toBeCompleted = [];
							}
							this.nextDayXubaoTitle.toBeCompleted = `待完成 (${newData.toBeCompleted.length})`;
							this.nextDayXubaoTitle.continue = `继续 (${newData.continue.length})`;
							this.nextDayXubaoTitle.finished = `已完成 (${newData.finished.length})`;
							this.nextDayXubaoTitle.abandon = `终止 (${newData.abandon.length})`;
							this.tomorrowUnCompleted = newData.toBeCompleted.length;
							this.tomorrowCompleted = newData.continue.length + newData.finished.length +
								newData.abandon.length;
							const total = newData.continue.length + newData.finished.length +
								newData.abandon.length + newData.toBeCompleted.length;
							this.tomorrowPercent = ((newData.continue.length + newData.finished.length +
								newData.abandon.length) / total * 100).toFixed(
								0);
							console.log('明日定保完成率', this.tomorrowPercent);
							if (newData.toBeCompleted.length == 0) {
								this.tomorrowOpen = false;
							} else {
								this.tomorrowOpen = true;
							}
							this.nextDayXubaoWorkList = newData;
							resolve();
						}
					})
				})

				let p3 = new Promise((resolve) => {
					this.weekOpen = false;
					let workListDate = {
						"beginDate": weekDay,
						"endDate": weekDay
					};
					apiRqs._getDBworkList(workListDate).then((res) => {
						console.log('定保本周任务清单', res);
						if (res.code == 200) {
							let newData = JSON.parse(JSON.stringify(res.data));
							if (newData.abandon == null || newData.abandon == "") {
								newData.abandon = [];
							}
							if (newData.continue == null || newData.continue == "") {
								newData.continue = [];
							}
							if (newData.finished == null || newData.finished == "") {
								newData.finished = [];
							}
							if (newData.toBeCompleted == null || newData.toBeCompleted == "") {
								newData.toBeCompleted = [];
							}
							this.weekDayXubaoTitle.toBeCompleted = `待完成 (${newData.toBeCompleted.length})`;
							this.weekDayXubaoTitle.continue = `继续 (${newData.continue.length})`;
							this.weekDayXubaoTitle.finished = `已完成 (${newData.finished.length})`;
							this.weekDayXubaoTitle.abandon = `终止 (${newData.abandon.length})`;
							this.weekUnCompleted = newData.toBeCompleted.length;
							this.weekCompleted = newData.continue.length + newData.finished.length +
								newData.abandon.length;
							const total = newData.continue.length + newData.finished.length +
								newData.abandon.length + newData.toBeCompleted.length;
							this.weekPercent = ((newData.continue.length + newData.finished.length +
								newData.abandon.length) / total * 100).toFixed(
								0);
							console.log('本周定保完成率', this.weekPercent);
							if (newData.toBeCompleted.length == 0) {
								this.weekOpen = false;
							} else {
								this.weekOpen = true;
							}
							this.weekDayXubaoWorkList = newData;
							resolve();
						}
					})
				})

				p1.then(() => {
					p2.then(() => {
						p3.then(() => {
							uni.hideLoading();
							console.log('执行完毕');
						})
					})
				})
			},

			// 获取已预约客户列表
			handleGetAppointmentList() {
				const tokenInfo = uni.getStorageSync("tokenInfo");
				let rqsData = {
					"lsn": "",
					"vin": "",
					"personLiable": tokenInfo.realName,
					"date": {
						"beginDate": this.appointmentRange[0],
						"endDate": this.appointmentRange[1]
					},
					"paged": {
						"pageSize": 9999,
						"pageIndex": 1,
						"orderBy": "asc"
					}
				};
				getApp().showLoading();
				apiRqs._getAppointmentList(rqsData).then((res) => {
					uni.hideLoading();
					console.log('已预约客户清单', res);
					if (res.code == 200) {
						const newData = JSON.parse(JSON.stringify(res.data.data));
						this.appointmentList = newData;
					} else {
						getApp().showToast(res.msg);
					}
				})
			},

			// 点击tabs
			onTabsClick(e) {
				const tabTitle = e.detail.title;
				if (tabTitle == '今日') {
					this.todayOpen = false;
					this.tomorrowOpen = false;
					this.weekOpen = false;
					setTimeout(() => {
						this.todayOpen = true;
					}, 100)
				} else if (tabTitle == '明日') {
					this.todayOpen = false;
					this.tomorrowOpen = false;
					this.weekOpen = false;
					setTimeout(() => {
						this.tomorrowOpen = true;
					}, 100)
				} else if (tabTitle == '本周') {
					this.todayOpen = false;
					this.tomorrowOpen = false;
					this.weekOpen = false;
					setTimeout(() => {
						this.weekOpen = true;
					}, 100)
				}
			},
			// 点击item
			handleItemClick(type) {
				if (type == 'import') {
					uni.navigateTo({
						url: "/packageD/xubao/data-import"
					})
				} else if (type == 'export') {
					this.$refs.popup.open('bottom');
				} else if (type == 'transfer') {
					uni.navigateTo({
						url: "/packageD/xubao/work-transfer"
					})
				} else if (type == 'node') {
					uni.navigateTo({
						url: "/packageD/xubao/node-config"
					})
				} else if (type == 'record') {
					uni.navigateTo({
						url: "/packageD/xubao/wx-history-record"
					})
				}
			},
			handleOpenDatePicker() {
				this.$refs.uniDateTimePicker.show();
				this.isChartShow = false;
			},
			maskClick() {
				this.isChartShow = true;
			},
			handleProjectTap(e) {
				console.log('chart tap', e);
			},
			dateChange(e) {
				this.range[0] = e[0] + " 00:00:00";
				this.range[1] = e[1] + " 00:00:00";
				console.log('Click:', this.range);
				getApp().showLoading();
				this.isChartShow = true;
				this.handleProjectStatics();
				this.getProjectDistriData();
				this.getMemberData();
				this.getAppointmentData();
				this.getFailData();
				this.getDateData();
			},
			// 获取项目完成度总览
			handleProjectStatics() {
				let rqs = {
					"shopId": this.shopId,
					"dateRange": {
						"beginDate": this.range[0],
						"endDate": this.range[1]
					},
					"nodeType": "",
					"userName": []
				};
				rqs.nodeType = this.currentProjectName;
				if (this.currentMemberName == '全部人员') {
					rqs.userName = [];
				} else {
					rqs.userName = [this.currentMemberName];
				}
				apiRqs._xubaoKPIstatics(rqs).then((res) => {
					console.log('完成度总览', res);
					uni.hideLoading();
					if (res.code == 200) {
						this.staticsData = res.data;
						let rate = res.data.finishRate;
						let chartRes = {
							categories: [{
								"value": 0.2,
								"color": "#f04864"
							}, {
								"value": 0.8,
								"color": "#2fc25b"
							}, {
								"value": 1,
								"color": "#008aff"
							}],
							series: [{
								name: "完成率",
								data: rate
							}]
						};

						this.opts.title.name = (rate * 100).toFixed(0) + "%";
						this.chartData = JSON.parse(JSON.stringify(chartRes));
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err);
				})
			},
			// 切换项目
			handleToggleProject() {
				this.projectTypePopShow = true;
				this.isChartShow = false;
			},
			// 切换成员
			handleToggleMember() {
				this.memberPopShow = true;
				this.isChartShow = false;
			},
			// 获取用户列表
			async handleGetMemberList() {
				var that = this;
				await apiRqs._getUser().then((res) => {
					console.log('成员列表', res);
					if (res.code == 200) {
						that.memberList = res.data;
						let memberList = [];
						let memberIdList = [];
						let data = res.data;
						for (let i = 0; i < data.length; i++) {
							memberList.push(data[i].realName);
							memberIdList.push(data[i].userId);
						}
						memberList.unshift("全部人员");
						memberIdList.unshift("0");
						that.memberTypeList = memberList;
						that.memberTypeIdList = memberIdList;
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},

			onProjectTypeConfirm(value) {
				console.log(value);
				this.currentProjectName = value.detail.value;
				this.currentProjectId = this.projectTypeIdList[value.detail.index];
				this.projectTypePopShow = false;
				this.isChartShow = true;
				getApp().showLoading();
				this.handleProjectStatics();
				this.getProjectDistriData();
				this.getMemberData();
				this.getAppointmentData();
				this.getFailData();
				this.getDateData();
			},
			onProjectTypeCancel() {
				this.projectTypePopShow = false;
				this.isChartShow = true;
			},
			onMemberConfirm(value) {
				console.log(value);
				this.memberTypeValue = value.detail.value;
				this.memberIdValue = this.memberTypeIdList[value.detail.index];
				this.currentMemberName = value.detail.value;
				this.currentMemberId = [this.memberTypeIdList[value.detail.index]];
				this.memberPopShow = false;
				this.isChartShow = true;
				getApp().showLoading();
				this.handleProjectStatics();
				this.getProjectDistriData();
				this.getMemberData();
				this.getAppointmentData();
				this.getFailData();
				this.getDateData();
			},
			onMemberCancel() {
				this.memberPopShow = false;
				this.isChartShow = true;
			},

			// 节点分布统计
			getProjectDistriData() {
				let rqs = {
					"shopId": this.shopId,
					"dateRange": {
						"beginDate": this.range[0],
						"endDate": this.range[1]
					},
					"nodeType": "",
					"userName": []
				};
				rqs.nodeType = this.currentProjectName;
				if (this.currentMemberName == '全部人员') {
					rqs.userName = [];
				} else {
					rqs.userName = [this.currentMemberName];
				}
				apiRqs._xubaoNodeKPI(rqs).then((res) => {
					console.log('节点分布统计', res);
					let maxSeries = [];
					let series = JSON.parse(JSON.stringify(res.data.series));
					let rqsxAxis = JSON.parse(JSON.stringify(res.data.xAxis));
					for (let i = 0; i < series.length; i++) {
						series[i].format = 'seriesFormat';
						for (let j = 0; j < series[i].data.length; j++) {
							if (!maxSeries[j]) {
								maxSeries[j] = series[i].data[j]
							} else {
								maxSeries[j] = maxSeries[j] + series[i].data[j];
							}
						}
					}
					let maxSplitNumber = Math.max(...maxSeries);
					this.projectDistriOpts.xAxis.splitNumber = maxSplitNumber > 5 ? 5 : 3;
					this.projectDistriOpts.xAxis.max = maxSplitNumber;
					this.projectKPIheight = res.data.xAxis.length > 3 ? res.data.xAxis.length * 70 : 240;
					if (res.code == 200) {
						if (rqsxAxis.length == 0) {
							this.isProjectKPIshow = false;
						} else {
							this.isProjectKPIshow = true;
							for (let i = 0; i < rqsxAxis.length; i++) {
								if (rqsxAxis[i] == "0") {
									rqsxAxis[i] = "M";
								} else {
									rqsxAxis[i] = "M" + rqsxAxis[i];
								}
							}
							let chartRes = {
								categories: rqsxAxis,
								series: series
							};
							this.projectDistriChartData = JSON.parse(JSON.stringify(chartRes));
						}
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err);
				})
			},
			// 成员结果分布统计
			getMemberData() {
				let rqs = {
					"shopId": this.shopId,
					"dateRange": {
						"beginDate": this.range[0],
						"endDate": this.range[1]
					},
					"nodeType": "",
					"userName": []
				};
				rqs.nodeType = this.currentProjectName;
				if (this.currentMemberName == '全部人员') {
					rqs.userName = [];
				} else {
					rqs.userName = [this.currentMemberName];
				}
				apiRqs._xubaoMemberKPI(rqs).then((res) => {
					console.log('成员结果分布统计', res);
					let maxSeries = [];
					let series = JSON.parse(JSON.stringify(res.data.series));
					for (let i = 0; i < series.length; i++) {
						series[i].format = 'seriesFormat';
						for (let j = 0; j < series[i].data.length; j++) {
							if (!maxSeries[j]) {
								maxSeries[j] = series[i].data[j]
							} else {
								maxSeries[j] = maxSeries[j] + series[i].data[j];
							}
						}
					}
					let maxSplitNumber = Math.max(...maxSeries);
					this.memberOpts.xAxis.splitNumber = maxSplitNumber > 5 ? 5 : 3;
					this.memberOpts.xAxis.max = maxSplitNumber;
					this.memberKPIheight = res.data.xAxis.length > 3 ? res.data.xAxis.length * 70 : 240;
					if (res.code == 200) {
						if (res.data.xAxis.length == 0) {
							this.isMemberKPIshow = false;
						} else {
							this.isMemberKPIshow = true;
							let chartRes = {
								categories: res.data.xAxis,
								series: series
							};
							this.memberChartData = JSON.parse(JSON.stringify(chartRes));
						}
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err);
				})
			},

			// 预约结果分布统计
			getAppointmentData() {
				const wxType = uni.getStorageSync("wxType");
				let rqs = {
					"shopId": this.shopId,
					"dateRange": {
						"beginDate": this.range[0],
						"endDate": this.range[1]
					},
					"nodeType": "",
					"userName": []
				};
				rqs.nodeType = this.currentProjectName;
				if (this.currentMemberName == '全部人员') {
					rqs.userName = [];
				} else {
					rqs.userName = [this.currentMemberName];
				}
				if (wxType == 'xubao') {
					apiRqs._getXbAppointmentKPIdata(rqs).then((res) => {
						console.log('续保预约结果统计', res);
						let maxSeries = [];
						let series = JSON.parse(JSON.stringify(res.data.series));
						for (let i = 0; i < series.length; i++) {
							series[i].format = 'seriesFormat';
							series[i].name = "预约数";
							for (let j = 0; j < series[i].data.length; j++) {
								if (!maxSeries[j]) {
									maxSeries[j] = series[i].data[j]
								} else {
									maxSeries[j] = maxSeries[j] + series[i].data[j];
								}
							}
						}
						let maxSplitNumber = Math.max(...maxSeries);
						this.appointmentOpts.xAxis.splitNumber = maxSplitNumber > 5 ? 5 : 3;
						this.appointmentOpts.xAxis.max = maxSplitNumber;
						this.appointmentKPIheight = res.data.xAxis.length > 3 ? res.data.xAxis.length * 70 : 240;
						if (res.code == 200) {
							if (res.data.xAxis.length == 0) {
								this.isAppointmentKPIshow = false;
							} else {
								this.isAppointmentKPIshow = true;
								let chartRes = {
									categories: res.data.xAxis,
									series: series
								};
								this.appointmentChartData = JSON.parse(JSON.stringify(chartRes));
							}
						} else {
							getApp().showToast(res.msg);
						}
					}).catch((err) => {
						console.log('err', err);
					})
				} else if (wxType == 'dingbao') {
					apiRqs._getDbAppointmentKPIdata(rqs).then((res) => {
						console.log('定保预约结果统计', res);
						let maxSeries = [];
						let series = JSON.parse(JSON.stringify(res.data.series));
						for (let i = 0; i < series.length; i++) {
							series[i].format = 'seriesFormat';
							series[i].name = "预约数";
							for (let j = 0; j < series[i].data.length; j++) {
								if (!maxSeries[j]) {
									maxSeries[j] = series[i].data[j]
								} else {
									maxSeries[j] = maxSeries[j] + series[i].data[j];
								}
							}
						}
						let maxSplitNumber = Math.max(...maxSeries);
						this.appointmentOpts.xAxis.splitNumber = maxSplitNumber > 5 ? 5 : 3;
						this.appointmentOpts.xAxis.max = maxSplitNumber;
						this.appointmentKPIheight = res.data.xAxis.length > 3 ? res.data.xAxis.length * 70 : 240;
						if (res.code == 200) {
							if (res.data.xAxis.length == 0) {
								this.isAppointmentKPIshow = false;
							} else {
								this.isAppointmentKPIshow = true;
								let chartRes = {
									categories: res.data.xAxis,
									series: series
								};
								this.appointmentChartData = JSON.parse(JSON.stringify(chartRes));
							}
						} else {
							getApp().showToast(res.msg);
						}
					}).catch((err) => {
						console.log('err', err);
					})
				}

			},


			// 战败结果分布统计
			getFailData() {
				let rqs = {
					"shopId": this.shopId,
					"dateRange": {
						"beginDate": this.range[0],
						"endDate": this.range[1]
					},
					"nodeType": "",
					"userName": []
				};
				rqs.nodeType = this.currentProjectName;
				if (this.currentMemberName == '全部人员') {
					rqs.userName = [];
				} else {
					rqs.userName = [this.currentMemberName];
				}
				apiRqs._xubaoFailKPI(rqs).then((res) => {
					console.log('战败分布统计', res);
					let maxSeries = [];
					let series = JSON.parse(JSON.stringify(res.data.series));
					for (let i = 0; i < series.length; i++) {
						series[i].format = 'seriesFormat';
						if (series[i].name == null || series[i].name == "") {
							series[i].name = "战败数";
						}
						for (let j = 0; j < series[i].data.length; j++) {
							if (!maxSeries[j]) {
								maxSeries[j] = series[i].data[j]
							} else {
								maxSeries[j] = maxSeries[j] + series[i].data[j];
							}
						}
					}
					let maxSplitNumber = Math.max(...maxSeries);
					this.failOpts.xAxis.splitNumber = maxSplitNumber > 5 ? 5 : 3;
					this.failOpts.xAxis.max = maxSplitNumber;
					this.failKPIheight = res.data.xAxis.length > 3 ? res.data.xAxis.length * 45 : 240;
					if (res.code == 200) {
						if (res.data.xAxis.length == 0) {
							this.isFailKPIshow = false;
						} else {
							this.isFailKPIshow = true;
							let chartRes = {
								categories: res.data.xAxis,
								series: series
							};
							this.failChartData = JSON.parse(JSON.stringify(chartRes));
						}
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err);
				})
			},
			// 日期分布统计
			getDateData() {
				let rqs = {
					"shopId": this.shopId,
					"dateRange": {
						"beginDate": this.range[0],
						"endDate": this.range[1]
					},
					"nodeType": "",
					"userName": []
				};
				rqs.nodeType = this.currentProjectName;
				if (this.currentMemberName == '全部人员') {
					rqs.userName = [];
				} else {
					rqs.userName = [this.currentMemberName];
				}
				apiRqs._xubaoDateKPI(rqs).then((res) => {
					console.log('近7日分布统计', res);
					let maxSeries = [];
					for (let i = 0; i < res.data.series.length; i++) {
						maxSeries[i] = Math.max(...res.data.series[i].data);
					}
					let maxSplitNumber = Math.max(...maxSeries);
					this.dateOpts.yAxis.splitNumber = maxSplitNumber > 5 ? 5 : 3;
					if (res.code == 200) {
						if (res.data.xAxis.length == 0) {
							this.isDateKPIshow = false;
						} else {
							let newX = [];
							let currentYear = "";
							for (let i = 0; i < res.data.xAxis.length; i++) {
								currentYear = res.data.xAxis[i].split("-")[0];
								newX.push(res.data.xAxis[i].split("-")[1] + "." + res.data.xAxis[i].split("-")[2])
							}

							this.isDateKPIshow = true;
							this.currentYear = currentYear;
							let chartRes = {
								categories: newX,
								series: res.data.series
							};
							this.dateChartData = JSON.parse(JSON.stringify(chartRes));
						}
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err);
				})
			},

			// 数据清空
			handleDataClear() {
				const wxType = uni.getStorageSync("wxType");
				var that = this;
				uni.showModal({
					title: "提示",
					content: "确认清空所有任务吗？(清空后不可恢复，需重新导入任务数据)",
					confirmText: "确认",
					confirmColor: "#008aff",
					cancelText: "取消",
					cancelColor: "#999",
					success(res) {
						if (res.confirm) {
							getApp().showLoading();
							if (wxType == 'xubao') {
								apiRqs._clearXbWork().then((res) => {
									uni.hideLoading();
									console.log('清空续保结果', res);
									if (res.code == 200) {
										getApp().showToast("清空成功", 'success');
										that.handleGetXbWorkList();
									} else {
										getApp().showToast(res.msg);
									}
								})
							} else if (wxType == 'dingbao') {
								apiRqs._clearDbWork().then((res) => {
									uni.hideLoading();
									console.log('清空定保结果', res);
									if (res.code == 200) {
										getApp().showToast("清空成功", 'success');
										that.handleGetDbWorkList();
									} else {
										getApp().showToast(res.msg);
									}
								})
							}

						}
					}
				})
			},
			onScreenTypeSelect(type) {
				if (type == 'dingbao') {
					this.screenData.wxType = "定保";
				} else if (type == 'xubao') {
					this.screenData.wxType = "续保";
				}
			},
			resetScreen() {
				this.screenData = {
					wxType: "定保",
					lsn: "",
					vin: ""
				};
			},
			submitScreen() {
				let screenData = this.screenData;
				let type = "";
				if (screenData.wxType == '定保') {
					type = "dingbaoDataExport"
				} else if (screenData.wxType == '续保') {
					type = "xubaoDataExport"
				}
				uni.navigateTo({
					url: "/packageD/data-download/download?type=" + type
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.xubao-page {
		.work-page {
			.date-screen-box {
				height: 50px;
				line-height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;

				.date-item {
					font-size: 16px;
					color: rgba(0, 0, 0, 0.4);
					padding: 0 30px;

					&.active {
						color: rgba(0, 0, 0, 0.8);
						font-weight: 600;
					}
				}
			}

			.todo-work-box {
				width: calc(100% - 40px);
				height: 115px;
				margin: 0 20px;
				border-radius: 10px;
				background-image: url("https://biapi.vaubang.cn/UploadFiles/Images/work-bg.png");
				background-repeat: no-repeat;
				background-size: 100%;
				padding: 12px 20px 20px 20px;
				box-sizing: border-box;

				.top-text {
					font-size: 16px;
					color: #fff;

					.todo-work-num {
						font-size: 25px;
						margin: 0 3px;
						font-weight: 600;
					}
				}

				.btm-text {
					font-size: 12px;
					color: #fff;
				}

				.work-gress {
					margin-top: 18px;
				}
			}

			.work-state-tab {
				margin-bottom: 20px;

				.van-tabs {
					margin-top: 0;
				}

				.van-tabs__scroll {
					background-color: transparent;
					margin: 0 20px;
				}

				.no-work-list {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-top: 100px;

					.no-data-icon {
						width: 120px;
					}

					.no-data-text {
						font-size: 12px;
						color: #999;
						margin-top: 10px;
					}

				}

				.work-list {
					margin: 0 20px;

					.work-item {

						background: linear-gradient(180deg, #FFFFFF 0%, #F3F9FF 100%);
						border-radius: 10px;
						display: flex;
						align-items: center;
						padding: 15px 20px;
						margin-top: 10px;

						&:first-child {
							margin-top: 0;
						}

						.work-item-icon {
							width: 46px;
							height: 46px;
							display: flex;
							align-items: center;
							justify-content: center;

							.icon {
								font-size: 46px;
								color: rgba(23, 148, 254, 0.8);
							}
						}

						.work-item-cus-info {
							margin-left: 10px;

							.cus-name {
								font-size: 14px;
								color: rgba(0, 0, 0, 0.9);
								font-weight: 500;
							}

							.cus-work-type {
								font-size: 12px;
								color: rgba(0, 0, 0, 0.4);
								margin-top: 3px;
							}
						}
					}
				}
			}







			.van-tabs {
				margin-top: 20px;
			}

			.van-tabs__scroll--card {
				margin: 0 20px;
			}

		}

		.appointment-page {
			.appointment-title {
				font-size: 14px;
				color: #333;
				margin: 20px 20px 12px 25px;
			}

			.appointment-list {
				margin: 0 20px 20px 20px;

				.appointment-item {
					width: 100%;
					height: 70px;
					background-image: url("/static/xubao/item-bg.png");
					background-repeat: no-repeat;
					background-size: 100%;
					display: flex;
					align-items: center;
					padding: 0 15px;
					box-sizing: border-box;
					border-radius: 10px;
					margin-top: 15px;

					.appointment-icon {
						width: 40px;
						flex: 0 0 40px;
						font-size: 40px;
						color: rgba(255, 255, 255, 0.4);
					}

					.appointment-content-right {
						flex: 1;
						margin-left: 10px;

						.appointment-content-header {
							font-size: 14px;
							color: #fff;
							font-weight: 600;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.appointment-user-info {
								flex: 1;
								min-width: 0;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}

							.appointment-date {
								width: 130px;
								flex: 0 0 130px;
								text-align: right;
								font-size: 12px;
							}
						}

						.appointment-content-bottom {
							font-size: 12px;
							color: #fff;
							margin-top: 5px;
						}
					}
				}
			}

			.no-appointment-list {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 100px;

				.no-data-icon {
					width: 120px;
				}

				.no-data-text {
					font-size: 12px;
					color: #999;
					margin-top: 10px;
				}
			}
		}

		.data-page {
			.data-page-header {
				width: calc(100% - 40px);
				margin: 20px;
				height: 120px;
				border-radius: 8px;

				.header-img {
					width: 100%;
					height: 100%;
					border-radius: 8px;
				}
			}

			.data-page-list {
				margin: 20px;

				.uni-list {
					margin-top: 20px;
					border-radius: 4px;

					&:last-child {
						margin-top: 10px;
					}

					uni-list-item {
						&:first-child {
							border-top-left-radius: 4px;
							border-top-right-radius: 4px;
						}

						&:last-child {
							border-bottom-left-radius: 4px;
							border-bottom-right-radius: 4px;
						}
					}

					.uni-list-item {
						&:first-child {
							border-top-left-radius: 4px;
							border-top-right-radius: 4px;
						}

						&:last-child {
							border-bottom-left-radius: 4px;
							border-bottom-right-radius: 4px;
						}

						.uni-list-item__container {
							padding: 16px 15px;

							.uni-list-item__header {
								padding-top: 2px;
							}
						}
					}
				}
			}
		}

		.kpi-page {
			.date-range {
				position: relative;

				.date-range-mask {
					position: absolute;
					width: 100%;
					height: 35px;
					top: 0;
					left: 0;
					z-index: 90;
					background-color: transparent;
				}

				.uni-datetime-picker {
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			.screen-kpi-section {
				margin: 15px;
				font-size: 14px;
				color: #A0A2AE;
				display: flex;
				align-items: center;

				.record-kpi-type {
					display: flex;
					align-items: center;

					&.member {
						margin-left: 20px;
					}
				}

				.arrow-icon {
					font-size: 12px;
					margin-left: 3px;
				}
			}

			.kpi-chart-box {
				overflow-y: auto;
			}

			.record-kpi-finish-total {
				background-color: #fff;
				border-radius: 4px;
				margin: 15px 15px 0 15px;
				padding: 15px;

				.header-circle {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.finish-circle-chart-title {
						font-size: 15px;
						font-weight: 500;
						color: #212D53;
					}

					.finish-circle-chart {
						width: 100%;
						height: 150px;
						margin-top: 15px;
					}
				}

				.bottom-total-statics {
					display: flex;
					align-items: center;
					margin-top: 20px;

					.statics-item {
						flex: 1;
						min-width: 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.statics-value-text {
							font-size: 24px;
							font-weight: 600;

							&.text1 {
								color: #5182C6;
							}

							&.text2 {
								color: #008aff;
							}

							&.text3 {
								color: #F0B83C;
							}

							&.text4 {
								color: #A2C463;
							}

							&.text5 {
								color: #6AC5C6;
							}
						}

						.statics-value-title {
							margin-top: 5px;
							font-size: 11px;
							color: #C1C0C3;
						}
					}
				}
			}

			.record-kpi-item {
				background-color: #fff;
				border-radius: 4px;
				margin: 0 15px;
				padding: 15px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 15px;

				.record-kpi-item-title {
					text-align: center;
					font-size: 15px;
					font-weight: 500;
					color: #212D53;

					&.date-item-title {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.year {
							font-size: 12px;
							color: #999;
							margin-top: 5px;
						}
					}
				}

				.record-kpi-item-chart {
					width: 100%;
					height: 200px;
					margin-top: 20px;

					&.date-item-chart {
						height: 280px;
					}

					&.item-chart-top {
						margin-top: 120px;
					}

					.record-kpi-item-chart-tips {
						font-size: 14px;
						color: #999;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.no-data-icon {
							width: 120px;
						}

						.tips-icon {
							font-size: 40px;
						}

						.tips-text {
							margin-top: 20px;
						}
					}
				}
			}

			.height {
				height: 40px;
			}
		}

		.screen-content-box {
			padding: 0 20px;

			.screen-title {
				font-size: 16px;
				width: 100%;
				text-align: center;
				margin: 20px 0;
			}

			.screen-item {
				.screen-item-name {
					font-size: 16px;
					color: #000;
					font-weight: 500;
					margin: 15px 0px;
				}

				.screen-input {
					background: rgba(0, 0, 0, 0.05);
					border-radius: 4px;
					height: 35px;
					line-height: 35px;
					text-align: center;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.5);
				}

				.placeholderFontClass {
					color: #ddd;
				}

				.screen-type-content {
					display: flex;
					align-items: center;

					.screen-type-item {
						background: rgba(0, 0, 0, 0.05);
						width: 110px;
						height: 35px;
						line-height: 35px;
						text-align: center;
						font-size: 14px;
						color: rgba(0, 0, 0, 0.9);
						border-radius: 4px;
						margin-right: 20px;

						&.active {
							background-color: #fff;
							border: 1px solid #008aff;
							color: #008aff;
						}
					}
				}
			}

			.btn-list {
				display: flex;
				align-items: center;
				margin-top: 30px;

				.reset-btn {
					flex: 1;
					height: 35pt;
					line-height: 35pt;
					background: rgba(0, 138, 255, 0.56);
					font-size: 14px;
					color: #FFFFFF;
					text-align: center;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
				}

				.done-btn {
					flex: 1;
					height: 35pt;
					line-height: 35pt;
					background: #008aff;
					font-size: 14px;
					color: #fff;
					text-align: center;
					border-top-right-radius: 4px;
					border-bottom-right-radius: 4px;
				}
			}

			.screen-height {
				height: 25px;
			}
		}
	}
</style>
